<route lang="json5" type="page">
    {
        layout: 'default',
      style: {
        navigationBarTitleText: '示例',
      },
    }
  </route>

<template>
  <view class="page">
    <sar-button type="default" @click="showTreePopup">树形弹窗</sar-button>
    <gi-tree-popup
      v-model:visible="treePopupVisible"
      :tree-data="treeData"
      @update:visible="updateVisible"
      @confirm="handleConfirm"
    />
  </view>
</template>

<script lang='ts' setup>
const treePopupVisible = ref(false)

const treeData = ref([
  {
    label: '电子产品',
    key: '0',
    children: [
      {
        label: '手机',
        key: '0-0',
        children: [
          { label: '苹果', key: '0-0-0' },
          { label: '华为', key: '0-0-1' },
          { label: '小米', key: '0-0-2' },
        ],
      },
      {
        label: '电脑',
        key: '0-1',
        children: [
          { label: '笔记本', key: '0-1-0' },
          { label: '台式机', key: '0-1-1' },
        ],
      },
    ],
  },
  {
    label: '服装',
    key: '1',
    children: [
      { label: '男装', key: '1-0' },
      { label: '女装', key: '1-1' },
      { label: '童装', key: '1-2' },
    ],
  },
])
function showTreePopup() {
  treePopupVisible.value = true
}

function updateVisible(val: boolean) {
  treePopupVisible.value = val
}

function handleConfirm(val: (string | number)[]) {
  console.log('val', val)
}
</script>

  <style lang='scss' scoped>

  </style>
